<template>
    <a-spin :spinning="spinning" tip="Loading...">
        <div style="color: rgb(255, 255, 255);margin-left: 20vh;margin-top: 2vh;display: inline-block;font-size: 2em;">
            <icon-font type="icon-fanhui" @click="$router.go(-1)"></icon-font>
        </div>
        <div style="margin-top: 2vh;display: inline-block">
            <a-page-header style="align-items:bottom;" title="我的收藏" />
        </div>
        <a-row>
            <a-col :xs="{ span: 21, offset: 1 }" :sm="{ span: 21, offset: 1 }" :md="{ span: 21, offset: 1 }"
                :lg="{ span: 21, offset: 1 }" :xl="{ span: 21, offset: 1 }">
                <a-divider />
                <a-col :xs="{ span: 4, offset: 4 }" :sm="{ span: 4, offset: 4 }" :md="{ span: 4, offset: 4 }"
                    :lg="{ span: 4, offset: 4 }" :xl="{ span: 4, offset: 4 }">
                    <a-typography-title :level="4">已收藏</a-typography-title>
                </a-col>
                <a-row>
                    <a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 24 }" :xl="{ span: 24 }">
                        <!-- 列表展示用户所有收藏论文，该列表尚未启用分页 -->
                        <a-list item-layout="vertical" size="large" v-model:data-source="favoriteContent"
                            style="margin-left: 25vh;">
                            <template #renderItem="{ item }">
                                <a-list-item key="item.title">
                                    <a-list-item-meta>
                                        <template #title>
                                            <!-- 打开抽屉展示论文详细信息 -->
                                            <div v-if="item.favorite" style="display:inline">
                                                <a-tooltip title="取消收藏">
                                                    <icon-font type="icon-shoucang"
                                                        @click="handleFavorite(item.paper_id)" />
                                                </a-tooltip>
                                            </div>
                                            <div v-else style="display:inline">
                                                <a-tooltip title="收藏">
                                                    <icon-font type="icon-shoucangS" tooltip="收藏"
                                                        @click="handleFavorite(item.paper_id)" />
                                                </a-tooltip>
                                            </div>
                                            <div style="display:inline;margin-left: 2vh;">
                                                <span style="cursor: pointer;" @click="showDrawer(item.paper_id)">{{
                                                    item.title
                                                }}</span>&nbsp;
                                            </div>
                                        </template>
                                        <template #description>
                                            <!-- 作者列表，可跳转至作者界面 -->
                                            <a-card
                                                style="width: 125vh;background-color: rgb(247, 249, 252);border-radius: 1vh;height: 6vh;line-height: 0%;">
                                                <template v-for="{ author_id, author_name } in item.authors"
                                                    :key="author_id">
                                                    <a @click="$router.push('/author_info?author_id=' + author_id)">{{
                                                        author_name }}</a>.&nbsp;
                                                </template>
                                                {{ item.update_date }}
                                            </a-card>
                                        </template>
                                    </a-list-item-meta>
                                </a-list-item>
                            </template>
                        </a-list>
                    </a-col>
                </a-row>
                <a-divider />
                <a-row>
                    <a-col :xs="{ span: 4, offset: 4 }" :sm="{ span: 4, offset: 4 }" :md="{ span: 4, offset: 4 }"
                        :lg="{ span: 4, offset: 4 }" :xl="{ span: 4, offset: 4 }">
                        <a-typography-title :level="4">相关推荐</a-typography-title>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 24 }" :xl="{ span: 24 }">
                        <!-- 列表展示根据收藏推荐论文结果，该列表尚未启用分页 -->
                        <a-list item-layout="vertical" size="large" :data-source="paperList" style="margin-left: 25vh;">
                            <template #renderItem="{ item }">
                                <a-list-item key="item.title">
                                    <a-list-item-meta>
                                        <template #title>
                                            <!-- 打开抽屉展示论文详细信息 -->
                                            <div v-if="item.favorite" style="display:inline">
                                                <a-tooltip title="取消收藏">
                                                    <icon-font type="icon-shoucang"
                                                        @click="handleFavorite(item.paper_id)" />
                                                </a-tooltip>
                                            </div>
                                            <div v-else style="display:inline">
                                                <a-tooltip title="收藏">
                                                    <icon-font type="icon-shoucangS" tooltip="收藏"
                                                        @click="handleFavorite(item.paper_id)" />
                                                </a-tooltip>
                                            </div>
                                            <div style="display:inline;margin-left: 2vh;">
                                                <span style="cursor: pointer;" @click="showDrawer(item.paper_id)">{{
                                                    item.title
                                                }}</span>&nbsp;
                                            </div>
                                        </template>
                                        <template #description>
                                            <!-- 作者列表，可跳转至作者界面 -->
                                            <a-card
                                                style="width: 125vh;background-color: rgb(247, 249, 252);border-radius: 1vh;height: 6vh;line-height: 0%;">
                                                <template v-for="{ author_id, author_name } in item.authors"
                                                    :key="author_id">
                                                    <a @click="$router.push('/author_profile?author_id=' + author_id)">{{
                                                        author_name }}</a>.&nbsp;
                                                </template>
                                                {{ item.update_date }}
                                            </a-card>
                                        </template>
                                    </a-list-item-meta>
                                </a-list-item>
                            </template>
                        </a-list>
                    </a-col>
                </a-row>
                <a-drawer width="800" placement="right" :closable="false" :visible="visible" @close="onClose">
                    <div style="font-size:12px; font-style:italic">[Submitted on&nbsp;{{ paper.update_date }}]</div>
                    <div style="font-size:16px; margin-bottom: 8px; font-weight:bold">
                        <span>{{ paper.title }}</span>
                        <a-tooltip title="查看论文">
                            <FilePdfOutlined key="pdf" @click="handlePDF(paper.url)" />
                        </a-tooltip>
                    </div>
                    <!-- 作者列表，可跳转至作者界面 -->
                    <template v-for="{ author_id, author_name } in paper.authors" :key="author_id">
                        <a @click="$router.push('/author_profile' + author_id)">{{ author_name }}</a>.&nbsp;
                    </template>
                    <p>{{ paper.paper_abstract }}</p>
                    <a-row>
                        <a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 24 }"
                            :xl="{ span: 24 }">
                            <div v-if="paper.comments = ''">
                                <a-typography-text>Comments:</a-typography-text>&nbsp;
                                <a-typography-text type="secondary">{{ paper.comments }}</a-typography-text>
                            </div>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 24 }"
                            :xl="{ span: 24 }">
                            <div>
                                <div style="display: inline-block;">
                                    <a-tag v-for="category in paper.categories" :key="category" color="rgb(224, 242, 255)"
                                        style="color: blue;border-radius: 10px;">{{
                                            category }}</a-tag>
                                </div>
                                <div style="display: inline-block;margin-left: 2vh;">
                                    <a-tag color="rgb(255, 237, 221)" style="color: rgb(205, 130, 20);border-radius: 10px;"
                                      >{{
                                            paper.version
                                        }}</a-tag>
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                </a-drawer>
            </a-col>
        </a-row>
    </a-spin>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs, ref } from 'vue'
import { StarOutlined, StarFilled, FilePdfOutlined } from '@ant-design/icons-vue';
import { get_favorite } from '@/api/post/get_favorite'
import { favorite_rec } from '@/api/post/favorite_rec'
import { favorite } from '@/api/post/favorite'
import { paper_detail } from '@/api/post/paper_detail'
import { assign } from 'lodash-es'
import dom_map from '@/constant/dom_map'
import globalVariable from '@/components/mathJax/globalVariable'
import { icon_url } from '@/util/iconfont'
import { createFromIconfontCN } from '@ant-design/icons-vue'
const IconFont = createFromIconfontCN({
    scriptUrl: icon_url

});

export default defineComponent({
    components: {
        StarOutlined,
        StarFilled,
        FilePdfOutlined,
        IconFont
    },
    setup() {
        const state = reactive({
            visible: false,
            paperList: [],
            favoriteContent: [],
            paper: {
                title: '',
                authors: [],
                update_date: '',
                favorite: false,
                paper_abstract: '',
                comments: '',
                categories: [],
                url: ''
            }
            // pagination
        })

        const spinning = ref(true)

        async function update() {
            spinning.value = true
            await get_favorite().then((response) => {
                if (response.data.status.code == 0) {
                    state.favoriteContent = response.data.data.favoriteContent
                }
            })
            await favorite_rec().then((response) => {
                if (response.data.status.code == 0) {
                    state.paperList = response.data.data.paperList
                }
            })
            await checkLaTex()
            spinning.value = false
        }

        async function handleFavorite(paper_id) {
            spinning.value = true
            state.paperList = []
            await favorite(paper_id)
            setTimeout(() => { }, 100);
            update()
        }

        onMounted(() => {
            update()
        })

        async function showDrawer(paper_id) {
            await paper_detail(paper_id).then((response) => {
                assign(state.paper, response.data.data.paper)
            })
            await checkLaTex()
            state.visible = true;
        };

        const onClose = () => {
            state.visible = false;
        };

        const handlePDF = (url) => {
            window.open(url, '_blank')
        }

        const checkLaTex = () => {
            // 抽屉这里必须设置为两次？ 不然首次点击无法正确显示LaTex
            globalVariable.initMathjaxConfig();
            globalVariable.MathQueue();
            globalVariable.MathQueue();
        }

        return {
            ...toRefs(state),
            spinning,
            handleFavorite,
            onClose,
            showDrawer,
            handlePDF,
            dom_map,
        };
    },
})
</script>

<style scoped>
span:hover {
    color: #1890ff;
    transition: 0.6s ease-in;
}

:deep(.ant-page-header-heading-title) {
    color: rgb(255 255 255);
    font-weight: 520;
    font-size: 1.5em;
}</style>